<template>
  <div class="add-box">
    <h3>我是添加组件--- {{$store.getters.infoNum}}</h3>

    <p>我这里显示的值是: {{$store.state.num}} </p>

    <button @click="addOneNum">加 1</button>
    <button @click="addNNum">加 n</button>
    <button @click="addOneNumAsync">加 1 async</button>
    <button @click="addNNumAsync">加 n async</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    addOneNum() {
      this.$store.commit('addOneNum') 
    },
    addNNum() {
      this.$store.commit('addNNum', 10)
    },
    addOneNumAsync() {
      this.$store.dispatch('addOneNumAsync')
    },
    addNNumAsync() {
       this.$store.dispatch('addOneNAsync', 9)
    }
  }
}
</script>
<style lang="css" scoped>
  
</style>